<template>
  <div class="home-recommond">
      <h3>官方歌单</h3>
      <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
         <li v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
          <div class="cover">
            <van-image :src="item.cover" radius="1rem" />
            <span>{{ item.listen_num | numFilter(1)}}万</span>
          </div>
            <span>{{ item.title }}</span>
        </li>
      </ul>
      </div>
  </div>
</template>
  
<script>
import {betterScrollHorizontal} from '../../common/betterScroll.js';
export default {
    data() {
      return {
        listData: [],
      };
    },
    created() {
      this.getSongListData();
    },
    methods: {
      getSongListData() {
        this.$request("get", "recommend/playlist/u")
        .then((res) => {
          console.log(res);
          if (res.result == 100) {
            this.listData = res.data.list;
          }
          betterScrollHorizontal(
            this,
            this.$refs.wrapper,
            this.$refs.content,
            this.listData.length,
            10
            )
        })
      }, 
      selectItem(item){
        const id =item.content_id;//获取歌单的id
        // console.log(id);//控制台输出歌单id
        //1.编程式导航,带有路径的u对象
        this.$router.push({path:`/songlist/${id}`})
        //上述内容``用到了ES语句中得模板字面量或模板字符串
        //2.编程式导航，字符串路径的方式
        // this.$router.push(`/songlist/${id}`);
        //3.编程式导航，命名的路由，并加上参数，让路由建立url
        // this.$router.push(
        //   {name:'songlist',
        //   params:{ 
        //     id:id //由于属性和value值得名字一样，所以此语句等同于 id
        //   }
        // })
       }
    },
    // filters:{
    //   numFilter(value,num){
    //     return parseFloat(value/10000).toFixed(num)
    //   }
    // }
  }
</script>
  
  <style scoped>
  /* .home-recommond > ul {
    display: flex;
    flex-wrap: wrap;
  }
  .home-recommond > ul > li {
    width: calc((100% - 1rem) / 3 * 1);
  }
  .home-recommond > ul > li:nth-of-type(3n + 2) {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .cover {
    position: relative;
  }
  .cover > span {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: brown;
  } */
  .wrapper{
    width: 100%;/*容器的宽度就是屏幕的宽度*/
    overflow: hidden;
  }
  ul.content > li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
  }
  ul.content > li *{
    margin:0 0.1rem;
  }
  ul.content >li > span{
    font-size: 0.8rem;
    color: #54493b;
  }
  .cover > span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background: color #a6a0a0;
    color: white;
    width: 5rem;
    border-radius: 1rem;
  }
  .cover{
    position: relative;
  }


 
  </style>
  